<template>
	<view>
		<fa-mynavbar :title="title" ref="navbar"></fa-mynavbar>
		<view class="content u-p-t-30 u-p-b-50 home">

			<view class="userinfo">
				<block v-if="vuex_token">

					<u-avatar size="120" :src="vuex_user.avatar" @click="goPage('/pages/my/profile')"></u-avatar>
					<view class="u-skeleton-fillet u-m-t-15 u-p-l-36">
						<text class="nickname">{{vuex_user.nickname}}</text>
						<text class="mobile u-m-t-14">{{vuex_user.mobile||'无'}}</text>
					</view>
				</block>
				<block v-else>
					<view class="no-login">
						<view class="item logo">
							<u-avatar size="120" :src="defaultAvatar"></u-avatar>
						</view>
						<view class="item" @click="goPage('/pages/login/mobilelogin')">
							<text>登录/注册</text>
						</view>
					</view>
					<!-- <view class="u-m-t-30"><u-button hover-class="none" size="mini"
							@click="goPage('/pages/login/mobilelogin')">立即登录</u-button></view> -->
				</block>
			</view>
			<view class="u-menu">
				<u-grid >
					<u-grid-item :border="false" v-for="(item,index) in menuList" :key="index" @click="goPage(item.page)">
						<image class="u-image" :src="item.src" ></image>
						<text class="grid-text">{{item.title}}</text>
					</u-grid-item>
				</u-grid>
			</view>
			<view class="u-margin-top-32 user-menu">
				<u-cell-group :border="false">
					
					<u-cell :border="true"
						@click="goPage('/pages/my/training')">
						<view
							slot="title"
							class="u-slot-title"
						>
							<text class="u-cell-text">技能培训</text>
						</view>
						<view
							slot="icon"
							class="u-slot-icon"
						>
							<image class="u-cell-image" src="../../static/menu/zs.png"></image>
						</view>
						<view slot ="right-icon">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</u-cell>
					<u-cell :border="true"
						@click="goPage('/pages/my/certificate')">
						<view
							slot="title"
							class="u-slot-title"
						>
							<text class="u-cell-text">技能证书</text>
						</view>
						<view
							slot="icon"
							class="u-slot-icon"
						>
							<image class="u-cell-image" src="../../static/menu/zs.png"></image>
						</view>
						<view slot ="right-icon">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</u-cell>
					<u-cell :border="true"
						@click="goPage('/pages/my/message')">
						<view
							slot="title"
							class="u-slot-title"
						>
							<text class="u-cell-text">消息中心</text>
						</view>
						<view
							slot="icon"
							class="u-slot-icon"
						>
							<image class="u-cell-image" src="../../static/menu/msg.png"></image>
						</view>
						<view slot ="right-icon">
							<u-icon name="arrow-right"></u-icon>
						</view>
						<text
							slot="value"
							class="u-slot-value"
						>{{vuex_user.unreadmsg}}</text>
					</u-cell>
					<u-cell :border="true"
						@click="goPage('/pages/training/appraisal')">
						<view
							slot="title"
							class="u-slot-title"
						>
							<text class="u-cell-text">职业技能认定</text>
						</view>
						<view
							slot="icon"
							class="u-slot-icon"
						>
							<image class="u-cell-image" src="../../static/menu/zs.png"></image>
						</view>
						<view slot ="right-icon">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</u-cell>
					<u-cell :border="false"
						@click="goPage('/pages/my/setting')">
						<view
							slot="title"
							class="u-slot-title"
						>
							<text class="u-cell-text">设置</text>
						</view>
						<view
							slot="icon"
							class="u-slot-icon"
						>
							<image class="u-cell-image" src="../../static/menu/set.png"></image>
						</view>
						<view slot ="right-icon">
							<u-icon name="arrow-right"></u-icon>
						</view>
					</u-cell>
					

				</u-cell-group>
			</view>
			
		</view>
		<!-- 导航 -->
		<!-- 底部导航 -->
		<fa-tabbar></fa-tabbar>
	</view>
</template>

<script>
	import {
		avatar
	} from '@/common/fa.mixin.js';
	export default {
		mixins: [avatar],
		computed: {
			// wavetop() {
			// 	return uni.$u.http.config.baseURL + '/assets/addons/cms/img/wave-top.png';
			// },
			// wavemiddle() {
			// 	return uni.$u.http.config.baseURL + '/assets/addons/cms/img/wave-mid.png';
			// },
			// wavebottom() {
			// 	return uni.$u.http.config.baseURL + '/assets/addons/cms/img/wave-bot.png';
			// },
			defaultAvatar() {
				return this.vuex_config.config.default_avatar || ''
			}
		},

		onShow() {
			if (this.vuex_token) {
				this.getUserIndex();
			} else {
				uni.$u.vuex('vuex_user', {});
			}
			//移除事件监听
			uni.$off('uAvatarCropper', this.upload);
		},
		data() {
			return {
				// 状态栏高度，H5中，此值为0，因为H5不可操作状态栏
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				// 导航栏内容区域高度，不包括状态栏高度在内
				navbarHeight: 44,
				form: {
					avatar: ''
				},
				title: '个人中心',
				menuList:[{
					src:'../../static/menu/kc.png',
					title:'已学课程',
					page:'/pages/my/course'
				},{
					src:'../../static/menu/xx.png',
					title:'在线学习',
					page:'/pages/question/question'
				},{
					src:'../../static/menu/sc.png',
					title:'我的收藏',
					page:'/pages/my/coursecollect'
				}]
			};
		},
		methods: {
			goToLogin() {
				if (!this.vuex_token) {
					uni.$u.route('/pages/login/mobilelogin');
				}
			},
			goOut() {
				this.$api.goUserLogout().then(res => {
					//退出成功
					uni.$u.vuex('vuex_token', '');
					uni.$u.vuex('vuex_user', {});
					uni.$u.vuex('vuex_openid', '');
					uni.$u.vuex('vuex_lasturl', '');
					uni.$u.vuex('vuex_setting', {});
				});
			},
			getUserIndex() {
				let apptype = '';
				let platform = '';
				// #ifdef MP-WEIXIN
				platform = 'wechat';
				apptype = 'miniapp';
				// #endif
				this.$api.getUserInfo({
					apptype,
					platform
				}).then(res => {
					uni.stopPullDownRefresh();
					if (res.code) {
						uni.$u.vuex('vuex_user', res.data.userInfo);

						if (res.data.showProfilePrompt && !this.vuex_setting.prompted) {
							// 弹窗每次登录状态只提示一次
							uni.$u.vuex('vuex_setting.prompted', true);
							uni.showModal({
								title: '温馨提示',
								confirmText: '去设置',
								cancelText: '取消',
								showCancel: true,
								content: '当前未设置昵称，请设置昵称后再继续操作',
								success: (res) => {

									if (res.confirm) {
										uni.$u.route("/pages/my/profile");
									} else if (res.cancel) {

									}
								}
							});
						}
					}
				});
			},
			
			goPage: async function(path, params) {
				
				if (!this.vuex_token) {
					uni.$u.route('/pages/login/mobilelogin');
					return;
				}
				this.$u.route(path, params);
			},
			editAvatar: async function() {
				let res = await this.$api.goUserAvatar({
					avatar: this.form.avatar
				});
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			if (this.vuex_token) {
				this.getUserIndex();
			} else {
				uni.stopPullDownRefresh();
				this.$u.toast('请先登录');
				this.$u.vuex('vuex_user', {});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f4f6f8;
	}

	/deep/ .u-status-bar {
		background: transparent !important;
	}

	/deep/ .u-navbar__content {
		background: transparent !important;
	}

	.home {
		background: url('http://ob.kmjsxy.com/uploads/20250305/39b9df55bee37a05717636a323300668.png') no-repeat;
		background-size: 100%;
		position: relative;
		// margin-top: 178rpx;
		padding: 24rpx;

		.userinfo {
			display: flex;
			align-items: center;
			padding: 30rpx 20rpx;
			margin-top: 168rpx;

			.u-skeleton-fillet {
				color: #ffffff;
				width: 100vw;

				text {
					display: block;
				}

				.nickname {
					color: #0f0f0f;
				}

				.mobile {
					width: 204rpx;
					height: 52rpx;
					background-color: #ffffff;
					border-radius: 52rpx;
					font-size: 26rpx;
					line-height: 52rpx;
					text-align: center;
					color: #666666;
				}
			}
		}

		.u-menu {
			margin-top: 42rpx;
			padding: 32rpx;
			border-radius: 20rpx;
			background-color: #FFFFFF;
			.u-image{
				width: 80rpx;
				height: 80rpx;
			}
			.grid-text{
				margin-top: 11rpx;
				color: #333333;
				font-size: 26rpx;
			}
		}

		.user-menu {
			background-color: #ffffff;
			border-radius: 20rpx;
			.u-slot-value {
				line-height: 17px;
				text-align: center;
				font-size: 10px;
				padding: 0 5px;
				height: 17px;
				color: #FFFFFF;
				border-radius: 100px;
				background-color: #f56c6c;
			}
			.u-slot-title{
				.u-cell-text{
					color: #333333;
					font-size: 30rpx;
				}
				
			}
			.u-slot-icon{
				margin-top: 8rpx;
				image{
					width: 44rpx;height: 44rpx;
				}
			}
			/deep/ .u-cell-group{
				padding: 0 24rpx;
			}
			/deep/ .u-cell__body{
				padding: 33rpx 0rpx;
			}
		}

		.no-login {
			display: flex;
			align-items: center;
			padding: 20rpx 0;

			.logo {
				margin-right: 20rpx;
			}

			.item {
				color: #333333;
			}
		}

		.follow {
			display: flex;

			.item {
				padding: 10rpx;
				text-align: center;

				text {
					display: block;
				}
			}
		}

		.corrugated {
			bottom: -2rpx;
			left: 0;
			position: absolute;
			width: 100%;
			height: 50%;
			overflow: hidden;
			z-index: 0;

			.wave-item {
				position: absolute;
				width: 200%;
				left: 0;
				background-repeat: repeat no-repeat;
				background-position: 0 bottom;
				transform-origin: center bottom;
			}

			.wave-top {
				opacity: 0.5;
				animation: wave-animation 3s;
				animation-delay: 1s;
				background-size: 50% 60rpx;
				z-index: 15;
			}

			.wave-middle {
				opacity: 0.75;
				animation: wavemove 10s linear infinite;
				background-size: 50% 80rpx;
				z-index: 10;
			}

			.wave-bottom {
				animation: wavemove 15s linear infinite;
				background-size: 50% 45rpx;
				z-index: 5;
			}
		}
	}

	@keyframes wavemove {
		0% {
			transform: translateX(0) translateZ(0) scaleY(1);
		}

		50% {
			transform: translateX(-25%) translateZ(0) scaleY(0.55);
		}

		100% {
			transform: translateX(-50%) translateZ(0) scaleY(1);
		}
	}
</style>